<template>
	<div class="category">
		<!-- 切换的点击区域 -->
		<ul class="title-ul">
			<li :class="{'default':iscur==item.id}" v-for="item in tabs" :key="item.id" @click="iscur=item.id">
				{{item.name}}
				<span :class="{'default-span':iscur==item.id}"></span>
			</li>
		</ul>
		<!-- 调用两个选项卡子组件 -->
		<CategoryTab1 v-show="iscur === 1" :propcategort='categort1'></CategoryTab1>
		<CategoryTab2 v-show="iscur === 2" :propcategort='categort2'></CategoryTab2>
		<div class="category-bottom">
			<div class="category-btn">
				<span>加载更多</span>
				<i class="iconfont icon-youjiantou"></i>
			</div>
		</div>
	</div>
</template>

<script>
import CategoryTab1 from './CategortTab1';
import CategoryTab2 from './CategortTab2';
export default {
	name:'Category',
	props:{
		propcategory:{
			type:Object,
			default(){
				return {}
			}
		}
	},
	components:{
		CategoryTab1,
		CategoryTab2
	},
	data(){
		return {
			iscur:1,//默认选中第一个标题以及第一个组件的
			tabs:[
				{id:1,name:'热门度假'},
				{id:2,name:'热门景点'},
			],
			categort1:{},
			categort2:{},
		}
	},
	watch:{
		propcategory(){
			this.categort1 = this.propcategory.Category.Category1;
			this.categort2 = this.propcategory.Category.Category2;
		}
	},
}
</script>

<style scoped>
.category{
	width: 90%;
	height: 10.3rem;
	margin: 0.5rem auto 0;
	/* background-color: #009798; */
}
.category .title-ul{
	height: 1.17rem;
 	background-color: #e1e1e1;
	width: 98%;
	padding: 0.1rem;
	border-radius: 0.3rem;
	display: flex;
	overflow: hidden;
	align-items: center;
}
.category .title-ul li{
	position: relative;
	width: 50%;
	font-size: 0.37rem;
	font-weight: bold;
	line-height: 1.2rem;
	text-align: center;
	border-radius: 0.2rem;
}
.category .title-ul .default{
	background-color: white;
}
.category .title-ul .default .default-span{
	border-radius: 0.05rem;
	position: absolute;
	left: 38%;
	display: block;
	height: 0.1rem;
	margin: 0 auto;
	transform: translateY(-0.25rem);
	width: 1rem;
	background-color: #e29700;
}
.category-btn{
	font-size: 0.3rem;
	text-align: center;
	border-radius: 0.35rem;
	border: 1px solid #b0b0b0;
	line-height: 0.75rem;
}
</style>
